<template>
  <div>
      <van-nav-bar
    title="搭饭"
    left-text="返回"
    left-arrow
    @click-left="$router.go(-1)"
  />
  <div class="artitem"  v-for="post in  PostList" :key="post.postId">
    <div class="header" @click=goHisXinxi>
        <img :src=post.postAvatar>
        <span class="name">{{ post.postNickname }}</span>
    </div>
    <div class="middle">
        <h2>{{ post.postTitle }}</h2> <br>
        <span>{{post.postContent}} <br> <img :src=post.postPicture></span>
        <p>{{ post.postTime }}</p>
    </div>
    <hr>
  </div>
  <h3 style="margin-top: 20px; margin-left: 15px;">评论</h3>
  <div class="replay-list">
    <ReplayItem v-for="item in ReplayList" :item="item" :key="item.postId"></ReplayItem>
    <!-- 评论框 -->
  </div>
 <div class="footer">
  <input type="text" v-model="pinglun" placeholder="快来发表你的评论吧"><button @click="publish">发布</button>
 </div>
  </div>
</template>

<script>
import {getPostDate,getAllReply,PulishReplay} from '@/api/post'
import { mapState} from "vuex";
import ReplayItem from '@/components/ReplayItems.vue';
export default {
    name:'Pinglun',
    components:{
      ReplayItem
 },
    data() {
    return {
      receivedParam1: '',//这个帖子的id
      receivedParam2: '',//这个帖子用户的id
      PostList:[],//帖子数据
      ReplayList:[],//评论数据
      pinglun:'',//双向绑定评论的内容
    };
  },
  mounted() {
    //接收路由挑来的值
    this.receivedParam1 = this.$route.params.param1;
    this.receivedParam2 = this.$route.params.param2;
    // console.log(this.receivedParam1, this.receivedParam2);
    getPostDate(this.receivedParam1,this.receivedParam2)
      .then(res => {
        // console.log(res);
        this.PostList=[res.data]
        
        // console.log('根据id获取单个帖子数据',this.PostList);
         })
          .catch(error => {
         console.log(error);
          });
     getAllReply(this.receivedParam1)
      .then(res => {
        this.ReplayList=[res.data]
        // console.log('获取帖子下的评论数据',this.ReplayList);
         })
          .catch(error => {
         console.log(error);
          });
  },
  computed: {
    //获取存储数据，获取发评论的本账号id
  ...mapState('user',["userInfo"])
},
  methods: {
    publish(){
      //发表评论
      console.log("传的参数",this.receivedParam1,this.userInfo.userId);
      PulishReplay( this.receivedParam1,this.userInfo.userId
        ,this.pinglun)
        .then(res=>{
          // console.log(res);
          this.pinglun=''
           // 接口调用完成后强制刷新页面
    // location.reload();
    this.$toast('发布成功')

        })
         .catch(error => {
             console.log(error);
              });
        },
        //去往信息页，并携带参数
        goHisXinxi(){
          const param1 =  this.receivedParam2; 
          this.$router.push(`/hisxinxi/${param1}`);
        }
  },

    }
    
</script>

<style lang="less" scoped>

.artitem{
    display: flex;
    flex-direction: column;
    hr{
        
        width: 90%;
        margin-top: 10px;
        margin-left: 20px;
    }
 }
 .header{
    width: 100%;
    img{
        width: 40px;
        height: 40px;
        border-radius: 40px;
        margin-left: 10px;
        margin-bottom: -10px;
    }
    .name{
        font-size: 17px;
        position: relative;
        left: 5%;
    }
  
 }
 .middle{
    width: 100%;
    h2{
       margin-left: 35px;
       margin-top: 15px;
    }
    span{
        margin-left: 35px;
        font-size: 15px;
        display: inline-block;
        width: 240px;
        // height: 20px;
        word-break: break-all;
    }
    p{
        margin-left: 290px;
        font-size: 11px;
        color: #636262;
    }
    img{
      width: 50px;
      height: 50px;
      margin-left: 3px;
    width: 17.33333vw;
    height: 16.33333vw;
    border-radius: 10px;
    }
 }
 .footer{
  position: fixed;
    bottom: 0;
    z-index: 1;
  input{
    width: 260px;
    border: 0;
    height: 30px;
    border-radius: 10px;
    padding-left: 20px;
    margin-left: 20px;
    background-color: #e5e5e5;
  }
  button{
    width: 60px;
    height: 30px;
    margin-left: 10px;
    background-color: #2a82e4;
    border-radius: 20px;
    color: aliceblue;
    border: 0;

  }
 }


</style>